<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 给Header组件绑定事件 -->
      <!-- <Header @addTodo="addTodo"/> -->
      <Header ref="header"/>
      <List :todos="todos" :deleteTodo="deleteTodo" :checkTodo="checkTodo"/>
      <Footer :todos="todos" :deleteAllDone="deleteAllDone" :checkAll="checkAll"/>
      <button @click="$refs.header.$off('addTodo')">解绑事件</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { v4 as uuidv4 } from 'uuid'
import { nanoid } from 'nanoid'
import Header from './components/Header/index.vue'
import List from './components/List/index.vue'
import Footer from './components/Footer/index.vue'
export default {
  name: 'App',
  components: {
    Header,
    List,
    Footer
  },

  data () {
    return {
      // todos: [
      //   {id: '001', title: '看科比打球', done: false},
      //   {id: '002', title: '听许巍的演唱会', done: true},
      //   {id: '003', title: '挣它100万', done: true},
      // ]

      // 上来读取local中的todos作为data中的初始值
      // 如果local中没有todos, 显示空列表
      // todos: JSON.parse(localStorage.getItem('todos_key')) || []
      todos: []
      
      // 只是刷新时不变
      // todos: JSON.parse(sessionStorage.getItem('todos_key2')) || []
    }
  },

  watch: {
    // 什么时候保存?  todos本身以及内部数据发生改变 => 深度监视
    todos: {
      handler (val) { // todos的最新值
        // 将最新的todos保存到local中
        localStorage.setItem('todos_key', JSON.stringify(val))
        // sessionStorage.setItem('todos_key2', JSON.stringify(val))
      },
      deep: true, // 深度监视
    }
  },


  
  mounted () {
    console.log(Vue.prototype)
    console.log(this.$refs.header)
    // 得到Header组件对象, 并给其绑定事件addTodo
    this.$refs.header.$on('addTodo', this.addTodo)

    // 如果读取数据是异步, 就需要在mounted中执行
    setTimeout(() => {
      this.todos = JSON.parse(localStorage.getItem('todos_key')) || []
    }, 1000);
  },

  methods: {
    // 添加todo
    addTodo (title) {

      // 创建一个todo对象
      const todo = {
        // id: Date.now()  + '',  // 后面讲
        // id: uuidv4(), // 使用uuid生成
        id: nanoid(), // 使用nanoid生成
        title,
        done: false
      }

      // 向todos中添加一个todo对象
      this.todos.unshift(todo)
    },
    // 删除一个todo
    deleteTodo (index) {
      this.todos.splice(index, 1)
    },

    // 设置指定todo的勾选状态
    checkTodo (todo, isCheck) {
      todo.done = isCheck
    },
    // 切换todo勾选状态
    toggleTodo (todo) {
      todo.done = !todo.done
    },

    // 清除所有已完成todo的函数
    deleteAllDone () {
      // 如果调用的是数组7个重写的方法之外, 一定要重新赋值   (pop/shift/unshift/reverse/splice/push/sort)
      this.todos = this.todos.filter(todo => !todo.done)
    },

    // 全选或全不选的函数
    checkAll (isCheck) {
      // 注意: 修改了数组元素对象中的属性 => 界面会更新, 因为我们更新了对象的已有属性
      this.todos.forEach(todo => todo.done = isCheck)
    } 
  }
}
</script>

<style>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>
